<template>
  <div>
      <el-card v-for="(commentItem,index) of localComment" :key="index" style="margin-bottom: 5px">
        <el-row :gutter="10">
         <el-col :span="1">
           <el-avatar size="large" :src="commentItem.userData.avatar"></el-avatar>
         </el-col>
          <el-col :span="4">
            <span style="line-height: 20px;font-size: 12px">{{commentItem.userData.userName}}</span>
            <br>
            <span style="line-height: 20px;font-size: 12px">{{commentItem.lastModified | transformTime}}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
         <el-col :span="24" style="line-height: 45px;font-size: 18px">{{commentItem.content}}</el-col>
        </el-row>
        <!--        二级评论-->
        <div class="soncomment" v-for="(sonCommentItem,index) of commentItem.comment" :key="index" >
          <el-row :gutter="10">
            <el-col :span="1">
              <el-avatar size="large" :src="sonCommentItem.userData.avatar"></el-avatar>
            </el-col>
            <el-col :span="2">
              <span style="line-height: 20px;font-size: 12px;color: #409EFF">{{sonCommentItem.userData.userName}}</span>
              <br>
              <span style="line-height: 20px;font-size: 12px;color: #409EFF">{{sonCommentItem.lastModified | transformTime}}</span>
            </el-col>
            <el-col :span="16" style="line-height: 45px;font-size: 18px">
              {{sonCommentItem.content}}
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="10">
         <el-col :span="6" style="color: #409EFF;cursor: pointer;line-height: 20px;font-size: 14px">
           <el-button
               type="text"
               icon="el-icon-s-comment"
               @click="switchComment(commentItem)"
           >回复
           </el-button>
         </el-col>
        </el-row>
        <!-- 二级评论       -->
        <el-row :gutter="10" v-if="commentItem.isComment">
          <el-col :span="24">
            <el-input v-model="commentStr" placeholder="请输入评论内容"></el-input>
          </el-col>
          <el-col :span="24" style="text-align: right;margin-top: 20px;">
            <el-button type="primary" @click="cancelComment(commentItem,'son')">取消</el-button>
            <el-button type="primary" @click="addComment(commentItem,'son')">回复</el-button>
          </el-col>
        </el-row>
      </el-card>

<!--      全局评论-->

    <el-row :gutter="10" v-if="isComment">
      <el-col :span="24">
        <el-input v-model="articleCommentStr" placeholder="请输入评论内容"></el-input>
      </el-col>
      <el-col :span="24" style="text-align: right;margin-top: 20px;">
        <el-button type="primary" @click="cancelComment(localComment,'father')">取消</el-button>
        <el-button type="primary" @click="addComment(localComment,'father')">回复</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import BlogService from "@/service/blogService";

export default {
  name: "Global-Editor",
  props:{
    blogId:{
      type:Number,
      default:0
    },
    comment:{
      type:Array,
      default(){
        return  []
      }
    }
  },
  watch:{
    comment:{
      handler(){
        this.localComment = this.comment.slice(0);
      },
      immediate:true
    }
  },
  data(){
    return{
      articleCommentStr: '',
      commentStr: '',
      localComment: [],
      isComment: true,
      userData: JSON.parse(sessionStorage.getItem('userData')),
    }
  },
  filters: {
    transformTime(time) {
      let blogCreateTime = new Date(time); // 获取博客发布的时间
      let currentTime = new Date(); //当前时间
      let offsetTime = currentTime - blogCreateTime; // 时间差 单位是ms
      let offsetST = offsetTime / 1000; // 转成s
      let offsetMT = offsetST / 60; // min
      let offsetHT = offsetMT / 60; // 转成h
      let offsetDT = offsetHT / 24; // days
      if (offsetDT >= 365) {
        return `发表于${Math.floor(offsetDT / 365)} 年之前`;
      } else if (offsetDT >= 30 && offsetDT < 365) {
        return `发表于${Math.floor(offsetDT / 30)} 月之前`;
      } else if (offsetDT >= 7 && offsetDT < 30) {
        return `发表于${Math.floor(offsetDT / 7)} 周之前`;
      } else if (offsetDT >= 1 && offsetDT < 7) {
        return `发表于${Math.floor(offsetDT)} 天之前`;
      } else if (offsetHT >= 1) {
        return `发表于${Math.floor(offsetHT)} 小时之前`;
      } else if (offsetMT >= 1) {
        return `发表于${Math.floor(offsetMT)} 分钟之前`;
      } else if (offsetST >= 0) {
        return `发表于${Math.floor(offsetST)} 秒钟之前`;
      }
    }
  },
  methods:{
    cancelComment(target, type) {
      switch (type) {
        case 'father':
          this.articleCommentStr = '';
          break;
        case  'son':
          this.commentStr = '';
          target.isComment = false;
          this.isComment = true;
          break;
      }
    },
    addComment(target, type) {
      let commentData = {
        fatherId: undefined,
        blogId: this.blogId,
        comment: {}
      }
      switch (type) {
        case 'father':
          commentData.comment = {
            userData: {
              userName: this.userData.userName,
              avatar: this.userData.avatar
            },
            content:this.articleCommentStr,
            isComment: false,
            comment: []
          }
          this.articleCommentStr = '';
          break;
        case  'son':
          commentData.fatherId = target.commentId;
          commentData.comment = {
            userData: {
              userName: this.userData.userName,
              avatar: this.userData.avatar
            },
            content:this.commentStr,
          }
          this.commentStr = '';
          target.isComment = false;
          this.isComment = true;
          break;
      }
      console.log(commentData)
      BlogService.createBlogComment(commentData).then(rs => {
        switch (type) {
          case 'father':
            target.push(rs.data.data.commentData)
            break;
          case  'son':
            target.comment.push(rs.data.data.commentData);
            target.isComment = false;
            break;
        }
      })
    },
    switchComment(commentItem){
      //关闭其他
      this.localComment.forEach((item) => {
        if (item !== commentItem) {
          item.isComment = false;
        }
      })
      //自身切换
      // 切换当前这个评论的回复状态
      commentItem.isComment = !commentItem.isComment;
      //全局的显示与隐藏
      if (commentItem.isComment){
        this.isComment=false
      }else {
        this.isComment=true
      }
    }
  }
}


</script>
<style scoped>
.soncomment{
  border-left: 2px solid #ccc;
  margin-bottom: 5px;
  margin-left: 12px;
  padding-left: 12px;
  border-bottom: 1px dashed #ccc;
}
</style>
<!--[-->
<!--//   一级评论-->
<!--{-->
<!--userData: {-->
<!--userName: 'wanzhang',-->
<!--avatar: 'http://127.0.0.1:8888/api/v1/getImg/d0e8384d-9269-4ee0-bbd3-7e09f5381a009a3af8f40d93bab869687c7335630c5a.jpg'-->
<!--},-->
<!--content: '真的好好看',-->
<!--commentId: 'a00c0c7c-6b48-4e4a-809c-b5c21627d9d3',-->
<!--lastModified: `2020-11-24T12:40:21.403Z`,-->
<!--isComment: false,-->
<!--// 二级评论-->
<!--comment: [-->
<!--{-->
<!--userData: {-->
<!--userName: 'wanzhang',-->
<!--avatar: 'http://127.0.0.1:8888/api/v1/getImg/d0e8384d-9269-4ee0-bbd3-7e09f5381a009a3af8f40d93bab869687c7335630c5a.jpg'-->
<!--},-->
<!--content: '确实很好看',-->
<!--commentId: '26b5b4b3-0056-4218-a84f-979022b6bfcf',-->
<!--lastModified: `2020-11-24T12:40:28.727Z`-->
<!--}-->
<!--],-->
<!--},-->
<!--{-->
<!--userData: {-->
<!--userName: '任生生Ren',-->
<!--avatar:-->
<!--'http://127.0.0.1:8888/api/v1/getImg/d0e8384d-9269-4ee0-bbd3-7e09f5381a009a3af8f40d93bab869687c7335630c5a.jpg'-->
<!--},-->
<!--content: '哇',-->
<!--isComment: false,-->
<!--comment: [],-->
<!--commentId: '1c246371-6953-48d0-8a9b-d74454289f5c',-->
<!--lastModified: `2020-11-24T13:11:12.217Z`-->
<!--}-->
<!--]-->